
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框防抖</title>
</head>
<body>
    搜索:  <input type="text">

    <script>

        let keywords = document.querySelector("input")

        keywords.oninput = debounce(function () {
            console.log(this.value)
        }, 1000)

        // 封装一个防抖函数
        function debounce(fn,await) {
            let timer = null;
            return function () {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fn.call(this)
                }, await);
            }
        }

    </script>
    
</body>
</html>